<template>
  <div id="app">
    <div>{{ message }}</div>
    <div class="intro">
      <p style="color: yellow">
        你的待办事项有{{ highTasks }}项重要，{{ normalTasks }}项一般，{{
          lowTasks
        }}项低。
      </p>
      <img :src="imgUrl" alt="avatar" />
    </div>
    <hr />
    <input
      type="text"
      class="taskInput"
      v-model="newTask"
      placeholder="把计划写下来吗?"
      @keyup.enter="addTask"
    />
    <button @click="addTask">添加</button>
    <div class="priority">
      <div>
        <input type="radio" value="重要" v-model="priority" />重要
        <input type="radio" value="一般" v-model="priority" />一般
        <input type="radio" value="低" v-model="priority" />低
      </div>
      <p>任务优先级: {{ priority }}</p>
    </div>
    <div>任务列表</div>
    <template v-if="tasks.length > 0">
      <ul>
        <li v-for="(task, index) in tasks" :key="index">
          <div class="yuan" :style="getStyleByTask(task)"></div>
          <div class="task-text" v-if="!task.editing">{{ task.text }}</div>
          <input v-else type="text" v-model="task.text" />

          <div class="actions">
            <span class="edit" @click="toggleEdit(task)">
              {{ task.editing ? '保存' : '编辑' }}
            </span>
            <span class="delete" @click="deleteTask(index)">删除</span>
          </div>
        </li>
      </ul>
    </template>
    <template v-else>
      <p>没有数据！</p>
    </template>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'

const newTask = ref('')
const priority = ref('一般')
const tasks = ref([])

const message = '你的代办事项'
const imgUrl = './images/user.png'

const getStyleByTask = task => {
  switch (task.priority) {
    case '重要':
      return { backgroundColor: 'red' }
    case '低':
      return { backgroundColor: 'gray' }
    default:
      return { backgroundColor: 'green' }
  }
}

// 计算属性
const highTasks = computed(() => {
  return tasks.value.filter(task => task.priority === '重要').length
})

const lowTasks = computed(() => {
  return tasks.value.filter(task => task.priority === '低').length
})

const normalTasks = computed(() => {
  return tasks.value.filter(task => task.priority === '一般').length
})

const addTask = () => {
  if (newTask.value.trim() !== '') {
    tasks.value.push({
      text: newTask.value,
      editing: false,
      priority: priority.value,
    })
    newTask.value = ''
    priority.value = '一般'
  }
}

const toggleEdit = task => {
  task.editing = !task.editing
}

const deleteTask = index => {
  if (confirm('确定要删除这个任务吗？')) {
    tasks.value.splice(index, 1)
  }
}

// 从 localStorage 读取任务数据
const loadTasksFromLocalStorage = () => {
  const storedTasks = localStorage.getItem('tasks')
  if (storedTasks) {
    tasks.value = JSON.parse(storedTasks)
  }
}

// 将任务数据保存到 localStorage
const saveTasksToLocalStorage = () => {
  localStorage.setItem('tasks', JSON.stringify(tasks.value))
}

// 在组件挂载时加载任务数据
onMounted(() => {
  loadTasksFromLocalStorage()
})

// 监听任务数据的变化并保存到 localStorage
watch(tasks, saveTasksToLocalStorage, { deep: true })
</script>

<style scoped>
/* 你可以在这里添加样式 */
</style>
